
<template>

    <div>

        <el-card shadow="never">
            <el-row>
                <el-col :span="6">
                    <h4 v-if="task.nodeName">{{task.nodeName}}</h4>
                    <span style="font-size: 12px;color: #8492a6;">
                        {{undo.userName}}({{ getUndoStateName() }})
                        <br>
                        {{undo.suggest}}
                    </span>
                </el-col>
                <el-col :span="18" style="text-align: right;color: rgb(192, 196, 204)">
                    {{ formatDate(undo.createTime) }}
                </el-col>
            </el-row>
        </el-card>

    </div>

</template>
<script>

    import moment from 'moment';

    export default {
        /**
         * 组件名称
         */
        name:'ApproverNode',
        props: {
            undo: Object,
            task: Object
        },
        data() {
            return {
                State: {
                    WAIT_HANDLE: {
                        value: 0,
                        name: "等待处理"
                    },
                    READED: {
                        value: 1,
                        name: "已读"
                    },
                    AGREE: {
                        value: 2,
                        name: "同意"
                    },
                    REFUSE: {
                        value: 3,
                        name: "拒绝"
                    },
                    ASSIGNOR: {
                        value: 4,
                        name: "委托"
                    }
                }
            };
        },

        created() {

        },

        computed: {

        },
        methods: {

            getUndoStateName(){

                var result = "";

                for(var key in this.State){

                    if(this.State[key].value == this.undo.result){

                        result = this.State[key].name;

                        break;
                    }
                }

                return result;
            },

            formatDate(timestamp){
                return moment(new Date(timestamp)).format("YYYY-MM-DD HH:mm:ss")
            }

        },
        watch: {
            undo: {
                handler:function (val) {

                    var that = this;

                    that.undo = val;
                },
                immediate: true,
                deep: true
            },
            task: {
                handler:function (val) {

                    var that = this;

                    that.task = val;
                },
                immediate: true,
                deep: true
            }
        },
        components: {
        }
    };
</script>
<style lang="stylus">

    .flow-line {
        .el-card__body{
            padding: 5px;
        }

        h4{
            margin-top: 0px;
            margin-bottom: 0px;
        }

        .el-card{
            border-left: 0px;
            border-right: 0px;
            border-top: 0px;
            border-bottom: 0px;
        }

        .next-line{
            color: #C0C4CC;
            text-align: center;
            width: 15px;
            font-size: 14px;
            display: inline-block;
        }

        .el-timeline-item{
            padding-bottom: 10px!important;
        }

        .title {
            color: #8492a6;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 10px;
            text-align: center;
        }

        .add-require {
            color: #F56C6C!important;
        }

        .close-btn{
            width: 40px;
            height: 14px;
            display: inline-block;
            position: absolute;
            top: -2px;
        }
    }
</style>
